<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>销售员管理</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
	
	<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/echarts.js"></script>
	
	<script type="text/javascript">
	
$(function(){
	
	option = null;

	
	var pieChart = echarts.init(document.getElementById('pie'));
	option={
title : {
    text: 'E尺总量',
    subtext: '',
    x:'center'
},
toolbox: {
			feature: {
				saveAsImage: {}
			}
},
tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
    orient: 'vertical',
    left: 'left',
   /*  data: ['已调试待入库','在库','出库'] */
    data:[],
	
},
series : [
    {
        name: 'E尺统计',
        type: 'pie',
        radius : '55%',
        center: ['50%', '60%'],
        /*  data:[
            {value:335, name:'已调试待入库'},
            {value:310, name:'在库'},
            {value:234, name:'出库'} 
           
        ],   */
        data:[],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]
}

//异步加载数据
$.get('${pageContext.request.contextPath}/page.ruler.ashx').done(function (data) {
	
	
    // 填入数据
    pieChart.setOption({
    	legend: {
        	data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
}); 
	
	if (option && typeof option === "object") {
		pieChart.setOption(option, true);
	}

})


	</script>

</head>
<body>
	<p hidden>千万条路千万人走，人海之中你莫回头啊  cuilitang 2017-1-18 10:27:45<p>
	
		  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="pie" style="width: 700px;height:400px;"></div>
	
</body>
</html>